﻿Ext.namespace('iOS.Bar');

/*
 * toolbar上的按钮的集合类，用于聚集各种按钮
 */
Ext.define('ToolBtnBar', {
    extend: 'BaseBar',

    statics: {
        ToolbarBtn : 'toolbar-btn',
        ArrowBtn   : 'arrow-btn',
        RectBtn    : 'rect-btn',
        LeftBtn    : 'left-btn',
        RightBtn   : 'right-btn',
        BarTitle   : 'notes-bar-title',
        BtnContent : 'btn-content',
        BarElem    : 'bar-elem',
        ReplaceBtn : 'replace-btn'
    },

    /*
     * 按钮配置信息
     */
    _btnCfg: {},

    _cardName: null,

    /*
     * 隐藏Bar的类型
     */
    _hideType: null,

    _oriZIndex: null,

    _eventList: [
        ['changeBtn'],
        ['hideBtnBar'],
        ['showBtnBar']
    ],

    _attachEventListener: function(){
        this.callParent();
        var sttc    = this.self,
            that    = this,
            btns    = this.getElCacheByCls(sttc.ToolbarBtn),
            leftBtn = this.getElCacheByCls(sttc.LeftBtn),
            rightBtn= this.getElCacheByCls(sttc.RightBtn),
            rplBtn  = this.getElCacheByCls(sttc.ReplaceBtn);
        btns.live($.support.mousedown, { scope : that,   operate: 'down' }, that.MDUHandler).
             live($.support.mouseup,   { scope : that,   operate: 'up' },   that.MDUHandler);
        leftBtn.on( $.support.click, { scope : that }, that.leftBtnCkHd);
        rightBtn.on($.support.click, { scope : that }, that.rightBtnCkHd);
        rplBtn.on($.support.click,   { scope : that }, that.rplcBtnHandle);
    },

    /*
     * 右边按钮单击事件处理函数，通常右边按钮较少出现，若需要，可继承此类，重载此方法。
     */
    rightBtnCkHd: function(event){},

    /*
     * 左边按钮单击事件处理函数，通常指的是返回按钮
     */
    leftBtnCkHd: function(event){
        var that     = event.data.scope || this,
            cardName = that.self.CardName,
            $this    = $(this),
            tarCard  = $this.attr('tarCard');
        iOS.ViewManager.notify(this, 'changeOriBtn', [tarCard]);
        iOS.ViewManager.notify(that._cardName, 'changeOriCard', [tarCard]);
    },

    /*
     * 按钮按下的效果
     */
    MDUHandler: function(event){
        var that      = event.data.scope || this,
            btnCfg    = that._btnCfg,
            sttc      = that.self,
            operate   = event.data.operate,
            $this     = $(this),
            direction = $this.attr('direction'),
            cfg;
        if(direction == 'left'){
            cfg       = btnCfg.leftBtnCfg;
        } else if(direction == 'right'){
            cfg       = btnCfg.rightBtnCfg;
        } else if($this.hasClass(sttc.ReplaceBtn)){
            cfg       = btnCfg.replaceBtnCfg;
        }
        cfg.pressed = operate == 'down' ? true : false;
        that.creatBtn(this, cfg);
    },

    _initInnerDom: function(){
        var sttc     = this.self,
            btnCfg   = this._btnCfg,
            cardName = btnCfg.cardName,
            btnCfgs  = [btnCfg.leftBtnCfg, btnCfg.rightBtnCfg, btnCfg.replaceBtnCfg],
            htmlData = 
                '<canvas width="0" height="0" direction="left" class="' + sttc.BarElem + ' ' + sttc.ToolbarBtn + ' ' + sttc.LeftBtn + '">' +
                '</canvas>' +
                '<span class="bar-title ' + sttc.BarElem + ' ' + sttc.BarTitle + '">' +
                '</span>' +
                '<canvas width="0" height="0" direction="right" class="' + sttc.BarElem + ' ' + sttc.ToolbarBtn + ' ' + sttc.RightBtn + '">' +
                '</canvas>' + 
                '<canvas width="0" height="0" style="display:none" class="' + sttc.BarElem + ' ' + sttc.ToolbarBtn + ' ' + sttc.ReplaceBtn + '">' +
                '</canvas>';
        this.getElCache().append(htmlData);
        var btns  = this.getElCacheByCls(sttc.ToolbarBtn);
        for(var i = 0; i < btns.length; i++){
            if(btnCfgs[i] && btnCfgs[i].tarCard){
                btns[i].setAttribute('tarcard', btnCfgs[i].tarCard);
            }
            this.creatBtn(btns[i], btnCfgs[i]);
        }
        this.changeTitle(btnCfg.titleCfg.content);
    },    

    hideBtnBar: function(type){
        type = type || 'fade';
        this.getElCache().css('opacity', '0');
        this._hideType = type;
    },

    showBtnBar: function(){
        if(this._hideType == 'fade'){
            
            this.getElCache().parent().css('opacity', '1');
        }
    },

    changeTitle: function(content){
        var sttc  = this.self,
            title = this.getElCacheByCls(sttc.BarTitle);
        title.html(content);
        title.css('margin-left', '-' + title.width() / 2 + 'px');
    },

    changeBtn: function(){
        var sttc      = this.self,
            tarBtnCls, curBtnCls;
        if(this.getElCacheByCls(sttc.ReplaceBtn)[0].style.display == 'none'){
            tarBtnCls = sttc.ReplaceBtn;
            curBtnCls = sttc.RightBtn;
        } else {
            tarBtnCls = sttc.RightBtn;
            curBtnCls = sttc.ReplaceBtn;
        }
        var tarBtn = this.getElCacheByCls(tarBtnCls),
            curBtn = this.getElCacheByCls(curBtnCls);
        curBtn.on('webkitTransitionEnd', function(){
            curBtn.hide().off('webkitTransitionEnd');
        });
        tarBtn.css({
            'opacity' : 0,
            'display' : '-webkit-box'
        });
        setTimeout(function(){
            tarBtn.css('opacity', 1);
            curBtn.css('opacity', 0);
        }, 1);
    },

    rplcBtnHandle: function(event){
        var that   = event.data.scope;
        that.changeBtn();
    },

     /*
     * 生成按钮，利用canvas实现，目前阿拉伯数字的宽度在计算上还有一些问题，
     * 字母和中文都OK了。
     */
    creatBtn: function(canvas, cfg){
        if(!cfg || !cfg.type){
            canvas.style.display = 'none';
            return false;
        }
        var sttc     = this.self,
            ctx      = canvas.getContext('2d'),
            shape    = cfg.type || 'arrow',
            content  = cfg.content,
            fontSize = cfg.fontSize || 12,
            btnLeft, btnRight, img, contentLen = 0, adjust = 0;
        for(var i = 0; i < content.length; i++){
            if(/[^\x00-\x80]/.test(content[i]) || content[i] == '+'){
                contentLen += fontSize;
            } else {
                contentLen += fontSize / 2;
            }
        };
        if(shape == 'arrow'){
            btnLeft  = 13;
            btnRight = 5;
        } else if(shape == 'rect'){
            if(cfg.content == '+'){
                adjust  = 3;
            } else {
                adjust  = 3 + fontSize / 2;
                contentLen += fontSize;
            }
            btnLeft  = 5;
            btnRight = 5;
        }
        
        //稍微留白调整
        contentLen += 3;
        img        = new Image();
        if(cfg.pressed){
            shape += '_pressed';
        }
        img.src    = 'resource/images/apps/notes/' + shape + '.png';
        img.onload = function(){
            canvas.height = 30;
            canvas.width  = btnLeft + contentLen + btnRight;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, btnLeft, 30, 0, 0, btnLeft, 30);
            ctx.drawImage(img, btnLeft, 0, 1, 30, btnLeft, 0, contentLen, 30);
            ctx.drawImage(img, btnLeft + 1, 0, btnRight, 30, btnLeft + contentLen, 0, btnRight, 30);
            ctx.font         = fontSize + 'px Verdana, Geneva, sans-serif';
            ctx.textBaseline = 'middle';
            ctx.fillStyle    = 'white';
            ctx.fillText(content, btnLeft + adjust, canvas.height / 2);
        };
    },
});

iOS.Bar.ToolBtnBar = ToolBtnBar;